// import legacy from '@vitejs/plugin-legacy'
// import { visualizer } from 'rollup-plugin-visualizer'
import { VitePWA } from 'vite-plugin-pwa'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { VantResolver } from '@vant/auto-import-resolver'
import viteCompression from 'vite-plugin-compression'
import postcsspxtoviewport from 'postcss-px-to-viewport'
import path from 'path'
import mobile from 'postcss-mobile-forever'
// https://vitejs.dev/config/

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [VantResolver()],
    }),
    Components({
      resolvers: [VantResolver()],
    }),
    viteCompression({
      // gzip静态资源压缩配置
      verbose: true,
      disable: false,
      threshold: 1024,
      algorithm: 'gzip',
      ext: '.gz',
    }),
    // visualizer({
    //   emitFile: false,
    //   filename: 'stats.html',
    //   open: false,
    // }),
    VitePWA({
      injectRegister: 'auto',
      registerType: 'autoUpdate',
      devOptions: {
        enabled: true, // 是否支持开发模式下也使 pwa 生效
      },
      includeAssets: ['./public/favicon.ico', 'apple-touch-icon.png', 'mask-icon.svg', 'favicon.png'], // 应该是下面 manifest 中可能用到的文件名字吧
      manifest: {
        name: 'SyaChat',
        short_name: 'SyaChat',
        theme_color: '#1B1B1B',
        start_url: './',
        display: 'standalone',
        background_color: '#373737',
        icons: [
        
          {
            src: './public/favicon.ico',
            sizes: '64x64',
            type: 'image/ico',
            purpose: 'any',
          },
        ],
      },
    }),
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    },
  },
  css: {
    postcss: {
      plugins: [
        // 移动端适配
        // postcsspxtoviewport({
        //   viewportWidth: 375,
        //   miniPixelValue: 1,
        //   replace: true,
        //   unitPrecision: 3,
        //   viewportUnit: 'vw', // 转换成vw单位          
        // }),
        // mobile({
        //   viewportWidth: 375,
        //   appSelector: '#app',
        //   maxDisplayWidth: 600
        // })
      ],
    },
  },
  build: {
    emptyOutDir: true,
    cssCodeSplit: true,
    chunkSizeWarningLimit: 1024, //chunk 超过 1024kb 之后进行提示
    minify: 'terser', //是否禁用最小化混淆，esbuild打包速度最快，terser打包体积最小。
    rollupOptions: {
      input: 'index.html',
      output: {
        // 静态资源打包做处理
        chunkFileNames: 'assets/js/[name]-[hash].js',
        entryFileNames: 'assets/js/[name]-[hash].js',
        assetFileNames: 'assets/[ext]/[name]-[hash].[ext]',
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return id.toString().split('node_modules/')[1].split('/')[0].toString()
          }
        },
      },
    },
    terserOptions: {
      //清除debugger和console
      compress: {
        drop_console: false,
        drop_debugger: true,
      },
      format: {
        comments: false, // 删除所有注释
      },
    },
  },
  server: {
    host: '0.0.0.0',
  },
})
